@charset "utf-8";

/* CSS Document */


 	@font-face {
		
		font-family:"outward block";
		src: url("../../fonts/outward-block-webfont.woff2") format('woff2'),
			 url("../../fonts/outward-block-webfont.woff") format('woff'),
			 url("../../fonts/outward-block.ttf") format('ttf');
		font-weight: normal;
		font-style: normal;

	}

	@font-face {
		
		font-family:"outward block";
		src: url("../fonts/outward-block-webfont.woff2") format('woff2'),
			 url("../fonts/outward-block-webfont	.woff") format('woff'),
			 url("../fonts/outward-block.ttf") format('ttf');
		font-weight: normal;
		font-style: normal;
	
	}





/*low resolution media query for mobile phones, 1 and up*/

@media only screen and (min-width: 1px) {
	
	#hide {
		
		display: block;
		
	}
	
	#bar_top {
	
		background-color: rgb(226,31,38);
		z-index: 999999999999999999999999999;
		height: 10px;
		width: 100%;
		position: fixed;
		display: block;
		margin-top: 0px;
		  
	}
	
	#bar_right {
		
		background-color: rgb(226,31,38);
		height: 25700px;
		width: 10px;
		display: none;
		margin-top: 0px;
		position: relative;
		float: right;
		margin-right: -10.1px;
		z-index: 999999999999999999999999999;
		  
	}
	
	body {	
		
		background: rgb(226,31,38);
		padding-bottom: 8px;
        margin-bottom: 0;
		height: 100%px;

	}
	
	#grad {
		
		display: none;

	}
	
	h1.style2 {
		
		display: none;
		color: yellow;
		margin-top: 70px;
		z-index: -1;
		font-size: 82vw;
		text-align: center;
		margin: 0px;
		padding-top: 135px;
		padding-bottom: 50px;
		margin-left: 1.2%
		
	}
	
	#footer_logo {
	
		font-family: "outward block";
	    letter-spacing: .006em;
	    color: red;
	    font-size: 20vw;
	    font-weight: 100;
		text-align: center;
	    padding-top: 70px;
	    margin-top: 0;
	    margin-bottom: 50px;
	    margin: auto;
	    text-align: center;
	
	}
	
	#home {
	    
	    margin-left: 2.5%;
	    
	}
	
	#arrow {
		
	    display: none;
		font-size: 30px;
    	line-height: 1.2;
		
	}
	
	.arrow_hover {
		
        display: none;
        width: 32%;
        margin-bottom: -1px;
        margin-left: -10px;
		
	}
	
	.arrow_hover:hover {
		
		display: none; 
		width: 32%;
         margin-bottom: -1px;
         margin-left: -10px;
	     content: url("../../images/Portfolio/Home page/millantv-return-to-top-arrow-hover.png");
		
	}	
	
	#millantv_navbar_red {
	
		display: none;
		position: relative;
		width: 63px;
		float: right;
		margin-right: -113px;
		margin-top: 10px;
		float: right;

	}

	#Social_Justice_Coalition_title_navbar {

		display: none;

	}
	
	/* The navigation bar */

	.navbar {
		
    	z-index: 3;
        overflow: hidden;
        background-color: white;
        border-top: solid;
        color: rgb(226,31,38);
        position: fixed;
        top: 0;
        width: 94%;
        font-family: "outward block";
        font-size: 50px;
        letter-spacing: .02em;
        margin: auto;
        padding-left: 0px;
        margin: 0px 0px 0px 0px;
        margin-top: 0px;
        border-top-width: 8px;
        margin-left: 0px;
        padding-bottom: 7px;

	}

	/* Links inside the navbar */
	
	.navbar a {
		
	    letter-spacing: .03em;
        float: left;
        display: block;
        color: red;
        margin: auto;
        margin: 10px 0px 0px 0px;
        word-spacing: 0.03em;
        text-decoration: none;
        margin-left: 24px;
        margin-right: -16px;
	
	}

	/* Change background on mouse-over */
	
	.navbar a:hover {
		
    	background-color: white;
	    color: black;
	
	}

	/* Main content */
	
	.main {
	  
		margin-top: 30px; /* Add a top margin to avoid content overlay */
	
	}

	#master {		
		
		width: 100%; 
		height: 100%;
		margin: 0 auto; 
		background: rgb(226,31,38);	
		
	}
	
	h1 {
		
        font-family: "outward block";
        letter-spacing: .006em;
        color: red;
        font-size: 43vw;
        font-weight: 100;
        margin-left: 3%;
        padding-top: 76px;
        margin-top: 5px;
        margin-bottom: 0px;
        line-height: .86;
		
	}
		
	.font1 {	
		
		font-family: Cambria, "Hoefler Text";
	}
	
	p {
					
		font-family: "tenso", sans-serif;
		font-weight: 350;
		font-style: normal;
		max-width: 892px;
		font-size: 18px;
		letter-spacing: .05em;
		word-spacing: 0.5px;
		line-height: 1.8;
		color: black;
		margin-left: -3%;
		margin-top: 60px;
		margin-bottom: 60px;
		padding-top: 0;
		transform: scale(.8,1);

	}
	
	.mobile {
		
		display: block;
		margin: auto;
		width:75%;
		margin-top: 25%;
		margin-bottom: 25%;

	}
	
	.mobile_live_examples {
		
		display: block;
		margin: auto;
		width:95%;
		margin-bottom: 8px;
		
	}
	
	.dont_hate_me {
		
		display: block;
		position: inherit;
		width: 95%;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		
	}

	#character_design_1_1 {
		
	    display: none;

	}
	
	#character_design_1_2 {
		
		display: none; 	

	}
	
	#character_design_1_3 {
		
		display: none;

	}
	
	#character_design_1_4 {
		
		display: none;

	}
	
	#character_design_2_1 {
		
		display: none;
		
	}
	
	#character_design_2_2 {
		
		display: none;
		
	}
	
	#character_design_2_3 {
		
		display: none;
		
	}
	
	#character_design_2_4 {
		
		display: none;
		position: fixed;
	}
	
	#character_design_3_1 {
		
		display: none;
		
	}
	
	#character_design_3_2 {
		
		display: none;
		
	}
	
	#character_design_3_3 {
		
		display: none;
		
	}
	
	#character_design_3_4 {
		
		display: none;
		position: fixed;
	}
	
	#mom_standing {
		
		position: absolute;
		display: flex;
		z-index: 1;
		margin-left: 50px;
		padding-top: 17px;
		max-width: 30%;

	}
	
	#character_design_4_1 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_4_2 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_4_3 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_4_4 {
		
		display: none;
		position: fixed;
	}
	
	#character_design_5_1 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_5_2 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_5_3 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_5_4 {
		
		display: none;
		position: fixed;
		
	}
	
	#Toonshiniwami_logo {
		
		display: block;
		width: 100% !important;
		padding-top: 80px !important;
		padding-bottom: 0;
		margin: auto;
		
	}
	
	#comic_pg1 {
		
		display: block;
		margin: auto;
		width: 90%;
		z-index: 9999;
		position: relative;
		margin-left: 11px;
        z-index: auto;

	}
	
	#comic_pg3 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -13%;
		z-index: -9999;
		padding-left: 9px;
		
	}
	
	#comic_pg4 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -9.8% !important;
		z-index: -9999;
		padding-bottom: 60px;
		
	}
	
	#Toonshiniwami_screengrab_1 {
		
		display: block;
		position: relative;
		margin: auto;
		width: 94% !important;
		margin-top: 4%;
		padding-bottom: 190px;
		
	}

	#Toonshiniwami_screengrab_2 {
		
		display: block;
		position: relative;
		margin: auto;
		width: 98%;
		margin-top: -23%;
		padding-bottom: 0px;
	}
	
	#3D_characters {
		
		margin: auto;
		width: 95%;
		display: block;
		
	}
	
	.no_border {
		
		width: 891px;
		height: 499px;
		margin: auto;
		
	}
	
	nav li a {		
		
		margin: 0;
		color: rgb(241,228,10); 	
		font-weight: normal; 
		line-height: 24px;
		font-size: 17.5px;
		font-weight: bold;
		letter-spacing: 2px;
		word-spacing: -3px;
		font-family: Arial;
		background: rgb(226,31,38);
			
	}
		
	#white_background {
		
		display: block;
		position: absolute;
		z-index: -99px;
		max-width: 100%;
		background-color: white;
		margin-top: 0px !important;
		padding-bottom: 150px!important;

		
		
		/*To create the bevelled edge on the white rectangle
		
		The main idea is to have 4 gradients that each occupy a quarter of the element's area (one for the bottom left, one for the bottom, on of the top right and one for the top left). Then you set the background to 4 linear gradients with the same color stops (in this case we wanted the corner size to be 10px*, so it was transparent until 10px and then the color we want from 10px) except the corners that are 45deg, 135deg, 225deg and 315deg respectively.

		*Actually not exactly 10px, it's the length of the hypotenuse of an isosceles right-angled triangle, which is around 14px*/
		
		
		background: #c00; /* fallback */
		background:
			
			linear-gradient(130deg, transparent 25px, white 0) top left,
			linear-gradient(225deg, transparent 0px, white 0) top right,
			linear-gradient(315deg, transparent 0px, white 0) bottom right,
			linear-gradient(45deg,  transparent 00px, white 0) bottom left;
		
		background-size: 60% 60%;
		background-repeat: no-repeat;
		
		
		border-radius: 0px 0px 25px 25px !important;

	}
	
	iframe {
		
		display: block;
		position: inherit;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		max-width:94%; 
		max-height: 94%;
		
	}	
	
}












/*low resolution media query for mobile phones, 349px and up*/

@media only screen and (min-width: 349px) {
	
	#hide {
		
		display: block;
		
	}
	
	#bar_top {
	    
        background-color: rgb(226,31,38);
        z-index: 999999999999999999999999999;
        height: 10px;
        width: 100%;
        position: fixed;
        display: block;
        margin-top: 0px;
          
    }
    
    #bar_right {
	    
        background-color: rgb(226,31,38);
        height: 25700px;
        width: 10px;
        display: none;
        margin-top: 0px;
        position: relative;
        float: right;
        margin-right: -10.1px;
        z-index: 999999999999999999999999999;
          
    }
	
	body {	
		
		background: rgb(226,31,38);
		padding-bottom: 8px;
        margin-bottom: 0;
		height: 100%px;

	}
	
	#grad {
		
		display: none;
	}
	
	h1.style2 {
		
		display: none;
		color: yellow;
		margin-top: 70px;
		z-index: -1;
		font-size: 82vw;
		text-align: center;
		margin: 0px;
		padding-top: 135px;
		padding-bottom: 50px;
		margin-left: 1.2%
		
	}
	
	#footer_logo {
	
		font-family: "outward block";
	        letter-spacing: .006em;
	        color: red;
	        font-size: 20vw;
	        font-weight: 100;
	        text-align: center;
	        padding-top: 70px;
	        margin-top: 0;
	        margin-bottom: 50px;
	        margin: auto;
	        text-align: center;
	
	}
	
	#home {
	    
	    margin-left: 2.3%;
	    
	}
	
	#arrow {
		
	    display: none;
		font-size: 30px;
    	line-height: 1.2;
		
	}
	
	.arrow_hover {
		
        display: inline;
        width: 32%;
        margin-bottom: -1px;
        margin-left: -10px;
		
	}
	
	.arrow_hover:hover {
		
		display: inline;
		width: 32%;
        margin-bottom: -1px;
        margin-left: -10px;
	    content: url("../../images/Portfolio/Home page/millantv-return-to-top-arrow-hover.png");
		
	}		
	
	#millantv_navbar_red {

		display: none;
        position: relative;
        width: 116px;
        margin-top: 19px;
        float: right;
        margin-left: 0;
        margin-right: 0;

	}

	#Social_Justice_Coalition_title_navbar {

		display: none;
        position: relative;
        width: 55px;
        margin-top: 12.5px;
        float: right;
        margin-left: 0;
        margin-right: 1.2%;

	}
	
	/* The navigation bar */

	.navbar {
		
    	z-index: 3;
        overflow: hidden;
        background-color: white;
        border-top: solid;
        color: rgb(226,31,38);
        position: fixed;
        top: 0;
        width: 95.39%;
        font-family: "outward block";
        font-size: 50px;
        letter-spacing: .02em;
        margin: auto;
        padding-left: 0px;
        margin: 0px 0px 0px 0px;
        margin-top: 0px;
        border-top-width: 8px;
        margin-left: 0px;
        padding-bottom: 7px;

	}

	/* Links inside the navbar */
	
	.navbar a {
		
	    letter-spacing: .03em;
        float: left;
        display: block;
        color: red;
        margin: auto;
        margin: 10px 0px 0px 0px;
        word-spacing: 0.03em;
        text-decoration: none;
        margin-left: 24px;
        margin-right: -16px;
	
	}

	/* Change background on mouse-over */
	
	.navbar a:hover {
		
    	background-color: white;
	    color: black;
	
	}

	/* Main content */
	
	.main {
	  
		margin-top: 30px; /* Add a top margin to avoid content overlay */
	
	}

	#master {		
		
		width: 100%; 
		height: 100%;
		margin: 0 auto; 
		background: rgb(226,31,38);	
		
	}
	
	h1 {
		
		font-family: "outward block";
		letter-spacing: .006em;
		color: red;
		font-size: 45vw;
		font-weight: 100;
		margin-left: 2.3%;
		padding-top: 67px;
		margin-top: 15px;
		margin-bottom: 50px;
		line-height: 0.86;
		
	}
		
	.font1 {	
		
		font-family: Cambria, "Hoefler Text";
	}
	
	p {
					
		font-family: "tenso", sans-serif;
		font-weight: 350;
		font-style: normal;
		max-width: 892px;
		font-size: 18px;
		letter-spacing: .05em;
		word-spacing: 0.5px;
		line-height: 1.8;
		color: black;
		margin-left: -3%;
		margin-top: 60px;
		margin-bottom: 60px;
		padding-top: 0;
		transform: scale(.8,1);

	}
	
	.mobile {
		
		display: block;
		margin: auto;
		width:75%;
		margin-top: 25%;
		margin-bottom: 25%;

	}
	
	.mobile_live_examples {
		
		display: block;
		margin: auto;
		width: 95.5%;
		margin-bottom: 8px;
		
	}
	
	.dont_hate_me {
		
		display: block;
		position: inherit;
		width: 95.5%;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		
	}

	#character_design_1_1 {
		
	    display: none;

	}
	
	#character_design_1_2 {
		
		display: none; 	

	}
	
	#character_design_1_3 {
		
		display: none;

	}
	
	#character_design_1_4 {
		
		display: none;

	}
	
	#character_design_2_1 {
		
		display: none;
		
	}
	
	#character_design_2_2 {
		
		display: none;
		
	}
	
	#character_design_2_3 {
		
		display: none;
		
	}
	
	#character_design_2_4 {
		
		display: none;
		position: fixed;

	}
	
	#character_design_3_1 {
		
		display: none;
		
	}
	
	#character_design_3_2 {
		
		display: none;
		
	}
	
	#character_design_3_3 {
		
		display: none;
		
	}
	
	#character_design_3_4 {
		
		display: none;
		position: fixed;

	}
	
	#mom_standing {
		
		position: absolute;
		display: flex;
		z-index: 1;
		margin-left: 50px;
		padding-top: 17px;
		max-width: 30%;

	}
	
	#character_design_4_1 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_4_2 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_4_3 {
		
		display: none;
		
	}
	
	#character_design_4_4 {
		
		display: none;
		position: fixed;
	}
	
	#character_design_5_1 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_5_2 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_5_3 {
		
		display: none;
		
	}
	
	#character_design_5_4 {
		
		display: none;
		position: fixed;
		
	}
	
	#Toonshiniwami_logo {
		
		display: block;
		width: 100%;
		padding-top: 30px;
		padding-bottom: 0px;
		margin: auto;
		
	}
	
	#comic_pg1 {
		
		display: block;
		margin: auto;
		width: 90%;
		z-index: 9999;
		position: relative;
		margin-left: 11px;
		z-index: auto;

	}
	
	#comic_pg3 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -13%;
		z-index: -9999;
		padding-left: 9px;
		
	}
	
	#comic_pg4 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -9.8% !important;
		z-index: -9999;
		padding-bottom: 60px;
		
	}
	
	#Toonshiniwami_screengrab_1 {
		
		display: block;
		position: relative;
		margin: auto;
		width: 95.5%;
		margin-top: 4%;
		padding-bottom: 140px;
		
	}

	#Toonshiniwami_screengrab_2 {
		
		display: block;
		position: relative;
		margin: auto;
		width: 98%;
		margin-top: -23%;
		padding-bottom: 0px;
	}
	
	#3D_characters {
		
		margin: auto;
		width: 95%;
		display: block;
		
	}
	
	.no_border {
		
		width: 891px;
		height: 499px;
		margin: auto;
		
	}
	
	nav li a {		
		
		margin: 0;
		color: rgb(241,228,10); 	
		font-weight: normal; 
		line-height: 24px;
		font-size: 17.5px;
		font-weight: bold;
		letter-spacing: 2px;
		word-spacing: -3px;
		font-family: Arial;
		background: rgb(226,31,38);
			
	}
		
	#white_background {
		
		display: block;
		position: absolute;
		z-index: -99px;
		max-width: 100%;
		background-color: white;
		margin-top: 0px !important;
		padding-bottom: 150px!important;
		
		
		/*To create the bevelled edge on the white rectangle
		
		The main idea is to have 4 gradients that each occupy a quarter of the element's area (one for the bottom left, one for the bottom, on of the top right and one for the top left). Then you set the background to 4 linear gradients with the same color stops (in this case we wanted the corner size to be 10px*, so it was transparent until 10px and then the color we want from 10px) except the corners that are 45deg, 135deg, 225deg and 315deg respectively.

		*Actually not exactly 10px, it's the length of the hypotenuse of an isosceles right-angled triangle, which is around 14px*/
		
		
		background: #c00; /* fallback */
		background:
			
			linear-gradient(130deg, transparent 25px, white 0) top left,
			linear-gradient(225deg, transparent 0px, white 0) top right,
			linear-gradient(315deg, transparent 0px, white 0) bottom right,
			linear-gradient(45deg,  transparent 00px, white 0) bottom left;
		
		background-size: 60% 60%;
		background-repeat: no-repeat;
		
		
		border-radius: 0px 0px 20px 20px;

	}	
	
	iframe {
		
		display: block;
		position: inherit;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		max-width:95%; 
		max-height: 95%;
		
	}	
	
}













/*mini-medium resolution media query for small tablets and large phones, 420px and up*/


@media only screen and (min-width: 420px) {
	
	#hide {
		
		display: block;
		
	}
	
	#bar_top {
	    
        background-color: rgb(226,31,38);
        z-index: 999999999999999999999999999;
        height: 10px;
        width: 100%;
        position: fixed;
        display: block;
        margin-top: 0px;
          
    }
    
    #bar_right {
	    
        background-color: rgb(226,31,38);
        height: 25700px;
        width: 10px;
        display: none;
        margin-top: 0px;
        position: relative;
        float: right;
        margin-right: -10.1px;
        z-index: 999999999999999999999999999;
          
    }
	
	body {	
		
		background: rgb(226,31,38);
		padding-bottom: 8px;
        margin-bottom: 0;
		height: 100%px;

	}
	
	#grad {
		
		display: none;

	}
	
	h1.style2 {
		
		display: none;
		color: yellow;
		margin-top: 70px;
		z-index: -1;
		font-size: 82vw;
		text-align: center;
		margin: 0px;
		padding-top: 135px;
		padding-bottom: 50px;
		margin-left: 1.2%
		
	}
	
	#footer_logo {
	
		font-family: "outward block";
	        letter-spacing: .006em;
	        color: red;
	        font-size: 20vw;
	        font-weight: 100;
	        text-align: center;
	        padding-top: 70px;
	        margin-top: 0;
	        margin-bottom: 50px;
	        margin: auto;
	        text-align: center;
	
	}
	
	#home {
	    
	    margin-left: 2.3%;
	    
	}
	
	#arrow {
		
	    display: none;
		font-size: 30px;
    	line-height: 1.2;
		
	}
	
	.arrow_hover {
		
        display: inline;
        width: 32%;
        margin-bottom: -1px;
        margin-left: -10px;
		
	}
	
	.arrow_hover:hover {
		
		 width: 32%;
         margin-bottom: -1px;
         margin-left: -10px;
	     content: url("../../images/Portfolio/Home page/millantv-return-to-top-arrow-hover.png");
		
	}	
	
	#millantv_navbar_red {

		display: none;
        position: relative;
        width: 116px;
        margin-top: 19px;
        float: right;
        margin-left: 0;
        margin-right: 0;

	}

	#Social_Justice_Coalition_title_navbar {

		display: inline;
        position: relative;
        width: 55px;
        margin-top: 12.5px;
        float: right;
        margin-left: 0;
        margin-right: 6px;

	}
	
	/* The navigation bar */

	.navbar {
		
    	z-index: 3;
        overflow: hidden;
        background-color: white;
        border-top: solid;
        color: rgb(226,31,38);
        position: fixed;
        top: 0;
        width: 95.39%;
        font-family: "outward block";
        font-size: 50px;
        letter-spacing: .02em;
        margin: auto;
        padding-left: 0px;
        margin: 0px 0px 0px 0px;
        margin-top: 0px;
        border-top-width: 8px;
        margin-left: 0px;
        padding-bottom: 7px;

	}

	/* Links inside the navbar */
	
	.navbar a {
		
	    letter-spacing: .03em;
        float: left;
        display: block;
        color: red;
        margin: auto;
        margin: 10px 0px 0px 0px;
        word-spacing: 0.03em;
        text-decoration: none;
        margin-left: 24px;
        margin-right: -16px;
	
	}

	/* Change background on mouse-over */
	
	.navbar a:hover {
		
    	background-color: white;
	    color: black;
	
	}

	/* Main content */
	
	.main {
	  
		margin-top: 30px; /* Add a top margin to avoid content overlay */
	
	}

	#master {		
		
		width: 100%; 
		height: 100%;
		margin: 0 auto; 
		background: rgb(226,31,38);	
		
	}
	
	h1 {
		
		font-family: "outward block";
		letter-spacing: .006em;
		color: red;
		font-size: 45vw;
		font-weight: 100;
		margin-left: 2.3%;
		margin-top: 15px;
		margin-bottom: 50px;
		line-height: 0.86;
		padding-top: 67px;
		
	}
		
	.font1 {	
		
		font-family: Cambria, "Hoefler Text";

	}
	
	p {
					
		font-family: "tenso", sans-serif;
		font-weight: 350;
		font-style: normal;
		max-width: 892px;
		font-size: 18px;
		letter-spacing: .05em;
		word-spacing: 0.5px;
		line-height: 1.8;
		color: black;
		margin-left: -3%;
		margin-top: 60px;
		margin-bottom: 60px;
		padding-top: 0;
		transform: scale(.8,1);

	}
	
	.mobile {
		
		display: block;
		margin: auto;
		width:75%;
		margin-top: 25%;
		margin-bottom: 25%;

	}
	
	.mobile_live_examples {
		
		display: block;
		margin: auto;
		width:95.5%;
		margin-bottom: 8px;
		
	}
	
	.dont_hate_me {
		
		display: block;
		position: inherit;
		width: 95.5%;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		
	}

	#character_design_1_1 {
		
	    display: none;

	}
	
	#character_design_1_2 {
		
		display: none; 	

	}
	
	#character_design_1_3 {
		
		display: none;

	}
	
	#character_design_1_4 {
		
		display: none;

	}
	
	#character_design_2_1 {
		
		display: none;
		
	}
	
	#character_design_2_2 {
		
		display: none;
		
	}
	
	#character_design_2_3 {
		
		display: none;
		
	}
	
	#character_design_2_4 {
		
		display: none;
		position: fixed;

	}
	
	#character_design_3_1 {
		
		display: none;
		
	}
	
	#character_design_3_2 {
		
		display: none;
		
	}
	
	#character_design_3_3 {
		
		display: none;
		
	}
	
	#character_design_3_4 {
		
		display: none;
		position: fixed;

	}
	
	#mom_standing {
		
		position: absolute;
		display: flex;
		z-index: 1;
		margin-left: 50px;
		padding-top: 17px;
		max-width: 30%;

	}
	
	#character_design_4_1 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_4_2 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_4_3 {
		
		display: none;
		
	}
	
	#character_design_4_4 {
		
		display: none;
		position: fixed;

	}
	
	#character_design_5_1 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_5_2 {
		
		display: none;
		position: fixed;
		
	}
	
	#character_design_5_3 {
		
		display: none;
		
	}
	
	#character_design_5_4 {
		
		display: none;
		position: fixed;
		
	}
	
	#Toonshiniwami_logo {
		
		display: block;
		width: 100%;
		padding-top: 30px;
		padding-bottom: 0px;
		margin: auto;
		
	}
	
	#comic_pg1 {
		
		display: block;
		margin: auto;
		width: 90%;
		z-index: 9999;
		position: relative;
		margin-left: 11px;
		z-index: auto;

	}
	
	#comic_pg3 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -13%;
		z-index: -9999;
		padding-left: 9px;
		
	}
	
	#comic_pg4 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -9.8% !important;
		z-index: -9999;
		padding-bottom: 60px;
		
	}
	
	#Toonshiniwami_screengrab_1 {
		
		display: block;
		position: relative;
		margin: auto;
		width: 94%;
		margin-top: 4%;
		padding-bottom: 140px;
		
	}

	#Toonshiniwami_screengrab_2 {
		
		display: block;
		position: relative;
		margin: auto;
		width: 98%;
		margin-top: -23%;
		padding-bottom: 0px;
	}
	
	#3D_characters {
		
		margin: auto;
		width: 95%;
		display: block;
		
	}
	
	.no_border {
		
		width: 891px;
		height: 499px;
		margin: auto;
		
	}
	
	nav li a {		
		
		margin: 0;
		color: rgb(241,228,10); 	
		font-weight: normal; 
		line-height: 24px;
		font-size: 17.5px;
		font-weight: bold;
		letter-spacing: 2px;
		word-spacing: -3px;
		font-family: Arial;
		background: rgb(226,31,38);
			
	}
		
	#white_background {
		
		display: block;
		position: absolute;
		z-index: -99px;
		max-width: 100%;
		background-color: white;
		margin-top: 0px !important;
		padding-bottom: 150px!important;

		
		/*To create the bevelled edge on the white rectangle
		
		The main idea is to have 4 gradients that each occupy a quarter of the element's area (one for the bottom left, one for the bottom, on of the top right and one for the top left). Then you set the background to 4 linear gradients with the same color stops (in this case we wanted the corner size to be 10px*, so it was transparent until 10px and then the color we want from 10px) except the corners that are 45deg, 135deg, 225deg and 315deg respectively.

		*Actually not exactly 10px, it's the length of the hypotenuse of an isosceles right-angled triangle, which is around 14px*/
		
		
		background: #c00; /* fallback */
		background:
			
			linear-gradient(130deg, transparent 25px, white 0) top left,
			linear-gradient(225deg, transparent 0px, white 0) top right,
			linear-gradient(315deg, transparent 0px, white 0) bottom right,
			linear-gradient(45deg,  transparent 00px, white 0) bottom left;
		
		background-size: 60% 60%;
		background-repeat: no-repeat;
		
		
		border-radius: 0px 0px 20px 20px ;

	}
	
	iframe {
		
		display: block;
		position: inherit;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		max-width:95%; 
		max-height: 95%;
		
	}	
	
}











/*mini-medium resolution media query for small tablets and large phones, 601px and up*/

@media only screen and (min-width: 601px) {
	
	body {	
		
		background: rgb(226,31,38);
		padding-bottom: 0px;
        margin-bottom: 0;
		height: 100%;
		
	}
	
	#grad {
	    
	    display: none;
	    
	}
	
	#bar_right {
	    
        background-color: rgb(226,31,38);
        height: 11750px;
        width: 10px;
        display: block;
        margin-top: 0px;
        position: relative;
        float: right;
        margin-right: -10.1px;
        z-index: 999999999999999999999999999;
          
    }
	
	#bar_top {
	    
	  display: block;
        position: fixed;
        width: 9999999px;
        height: 10px;
        top: -1px;
        z-index: 9999;
        margin-right: 500px;
        margin-bottom: 0px;
        background-color: rgb(226,31,38);
	    
	}

	h1.style2 {
		
		display: none;
		color: yellow;
		margin-top: 70px;
		font-size: 82vw;
		text-align: center;
		margin: 0px;
		padding-top: 180px;
		padding-bottom: 50px;
		margin-left: 1.2%
		
	}
	
	#home {
	    
	    margin-left: 2.3%;
	    
	}
	
	#arrow {
		
		font-size: 50px;
    	line-height: 1.1;
		
	}
	
	.arrow_hover {
		
    	display: inline;
        width: 74%;
        margin-bottom: -1px;
        margin-left: -45px;
		
	}
	
	.arrow_hover:hover {
		
		display: inline;
		width: 74%;
        margin-bottom: -1px;
        margin-left: -45px;
	    content: url("../../images/Portfolio/Home page/millantv-return-to-top-arrow-hover.png");
		
	}

	#millantv_navbar_red {

        display: inline;
        width: 82px;
        margin-right: -157px;
        margin-top: 16px;
        float: right;

	}

	#millantv_navbar_red:hover {

        display: inline;
        width: 82px;
        margin-right: -157px;
        margin-top: 16px;
        float: right;
		content: url("../../images/millantv-logo-navbar-hover-black.svg");
		
	}
	
	/* The navigation bar */

	.navbar {
		
    	z-index: 1;
        overflow: hidden;
        background-color: white;
        border-top: solid;
        color: rgb(226,31,38);
        position: fixed;
        top: 0;
        width: 97.3%;
        font-family: "outward block";
        font-size: 60px;
        letter-spacing: .02em;
        padding-left: 0px;
        margin: 0px 0px 0px 0px;
        margin-top: 0px;
        border-top-width: 8px;
        margin-left: 0px;
        padding-bottom: 5px;

	}

	/* Links inside the navbar */
	
	.navbar a {
		  
		font-family: "outward block";
        font-size: 60px;
        letter-spacing: .03em;
		float: left;
		display: block;
		color: red;
		text-align: center;
		margin: 10px 0px 0px 0px;
		word-spacing: .03em;
		text-decoration: none;
		margin-left: 31px;
        margin-right: -16px;
	
	}

	/* Change background on mouse-over */
	
	.navbar a:hover {
		
		  background-color: white;
		  color: black;
	
	}

	#Social_Justice_Coalition_title_navbar {

		margin-right: 112px;
		margin-top: 16px;

	}

	/* Main content */

	.main {
	  
			margin-top: 30px; /* Add a top margin to avoid content overlay */
	
	}
		
	#master {		
		
		overflow: auto;
		width: 100%; 
		margin: 0 auto; 
		/*border: dotted thin cyan;*/
		background: rgb(226,31,38);	
		margin-top: 8px;
		margin-bottom: 0px;
		padding-bottom: 10px;
		border-radius: 0px 0px 38px 38px;
		
	}

	h1 {

        font-family: "outward block";
        letter-spacing: .006em;
        color: red;
        font-size: 240px;
        font-weight: 100;
        margin-left: 2.2%;
        margin-top: 15px;
        margin-bottom: 0px;
        overflow-wrap: break-word;
        line-height: 0.86;
        padding-top: 76px;
		
		}

	p {
	
		font-family: "tenso", sans-serif;
		font-weight: 350;
		font-style: normal;
		max-width: 892px;
		float:left;
		font-size: 18px;
		letter-spacing: .05em;
		word-spacing: .5px;
		line-height: 1.8;
		color: black;
		margin-left: 9.7px;
		margin-top: 60px;
		margin-bottom: 60px;
		padding-top: 0;
		transform: scale(.8,1);
			
	}
	
	.body_copy {
		
		margin-left:-5%;
		max-width: 180%;
		
	}
	
	.dont_hate_me {
		
		display: block;
		position: inherit;
		width: 95.8%;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		
	}
	
	.mobile {
		
		display: none;

	}
	
	.mobile_live_examples {
		
		display: none;
		
	}

	#character_design_1_1 {
		
	    display: block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-top: 60px;
		margin-bottom: -7%;

	}
	
	#character_design_1_2 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-bottom: -5%;

	}
	
	#character_design_1_3 {
		
		display: block;
		position: relative;
		margin: auto;
		width: 95.8%;
		margin-top: 3%;

	}
	
	#character_design_1_4 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto; 
		margin-bottom: 60px;
	}
	
	#character_design_2_1 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-top: 40px;
		margin-bottom: -7%;
		
	}
	
	#character_design_2_2 {
		
		display: block;
		position: relative;
		z-index: 9;
		width: 70%;
		margin: auto;
		margin-top: -10.8%;
		margin-bottom: 45px;
		z-index: auto;
		
	}
	
	#character_design_2_3 {
		
		display: block;
		position: relative;
		width: 95.8%;
		margin: auto;
		margin-top: 9%;
		padding-bottom: 11%;
		
	}
	
	#character_design_2_4 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto; 
		margin-bottom: 60px;
		margin-top: -17%;
	}
	
	#character_design_3_1 {
		
		display: block;
		position: relative;
		width: 70%;
		padding-top: 60px;
		margin: auto;
		
	}
	
	#character_design_3_2 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-bottom: 10px;
		margin-top: 0;
		
	}
	
	#character_design_3_3 {
		
		display: block;
		position: relative;
		width: 95.8%;
		margin: auto;
		padding-bottom: 13%;
		margin-top: 70px;
		
	}
	
	#character_design_3_4 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-bottom: 70px;
		margin-top: 0;
		
	}
	
	#mom_standing {
		
		position: absolute;
		display: flex;
		z-index: 1;
		margin-left: 50px;
		padding-top: 17px;
		max-width: 36.4%;
		
	}
	
	#character_design_3_3_3 {
		
		display: block;
		position: relative;
		width: 93%;
		margin: auto;
		margin-bottom: -125px;
		margin-top: -15.1% !important;
		
	}
	
	#character_design_4_1 {
		
		display:block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-top: 70px;
		margin-bottom: 2%;
		
	}
	
	#character_design_4_2 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-bottom: 20px !important;
		margin-top: 0;
		
	}
	
	#character_design_4_3 {
		
		display: block;
        position: relative;
        width: 95.8%;
        margin: auto;
        padding-bottom: 13%;
        margin-top: 70px;
		
	}
	
	#character_design_4_2 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-bottom: 60px;
		margin-top: 0;
		
	}

	#character_design_4_4 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-bottom: 60px;
		margin-top: 0;
		
	}
	
	#character_design_5_1 {
		
		display:block;
		position: relative;
		width: 70%;
		margin: auto;
		margin-top: 60px;
		margin-bottom: 1.7%;
		
	}
	
	#character_design_5_2 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
		padding-bottom: 10px;
		
	}
	
	#character_design_5_3 {
		
		display: block;
        position: relative;
        width: 95.8%;
        margin: auto;
        padding-bottom: 13%;
        margin-top: 70px;
		
	}
	
	#character_design_5_4 {
		
		display: block;
		position: relative;
		width: 70%;
		margin: auto;
        padding-bottom: 10px;
		
	}
	
	#Toonshiniwami_logo {
		
		display: block;
		position: relative;
		width: 70%;
		padding-top: 30px;
		padding-bottom: 0px;
		margin: auto;
		
	}
	
	#comic_pg1 {
		
		display: block;
		margin: auto;
		width: 90%;
		z-index: 9999;
		position: relative;
		margin-left: 11px;
		z-index: auto;

	}
	
	#comic_pg3 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -13%;
		z-index: -9999;
		padding-left: 9px;
		
	}
	
	#comic_pg4 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -9.8% !important;
		z-index: -9999;
		padding-bottom: 60px;
		
	}
	
	#Toonshiniwami_screengrab_1 {
		
		display: block;
		position: relative;
		margin: auto;
		max-width: 94%;
		margin-top: 4%;
		padding-bottom: 150px;
		
	}

	#Toonshiniwami_screengrab_2 {
		
		display: block;
		position: relative;
		margin: auto;
		max-width: 96.3%;
		margin-top: -23%;
		padding-bottom: 0px;

	}
	
	#3D_characters {
		
		margin: auto;
		width: 95%;
		display: block;
		
	}
	
	.no_border {
		
		width: 891px;
		height: 499px;
		margin: auto;
		
	}
	
	iframe {
		
		display: block;
		position: relative;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		max-width:96%; 
		max-height: 96%;
		
	}

#white_background {
		
		display: block;
		position: absolute;
		height: 100%;
		overflow: hidden;
		z-index: -99px;
		max-width: 100%;
		background-color: white;
		margin-top: 0;
		padding-bottom: 150px;
		border-radius: 0px 0px 30px 30px;

	}
	
}
















	
/*high resolution media query for desktop computers, 990px and above*/

@media only screen and (min-width: 990px) {
	
	#hide {
		
		display: block;
		
	}
	
	#bar_top {
	    
	    background-color: white;
        z-index: 999999999999999999999999999;
        height: 10px;
        width: 9999999999px;
        position: fixed;
        display: block;
        margin-top: -1px;
        text-align: -webkit-center;
      
    }

    #bar_right {
	    
        background-color: rgb(226,31,38);
        height: 25700px;
        width: 10px;
        display: none;
        margin-top: 0px;
        position: relative;
        float: right;
        margin-right: -10.1px;
        z-index: 999999999999999999999999999;
          
    }

	body {	
		
		background: white;
		padding-bottom: 150px;
		height: 100%;
		
	}
	
	#grad {
		
		display: none;
		z-index: 0;
		position: fixed;
		margin-top: -50px;
		width: 3000px;
		margin-left: -800px;
		height:270px;
		background: rgb(226,31,38); /* For browsers that do not support gradients */ /* FF3.6-15 */
		background: -webkit-linear-gradient(rgb(226,31,38) 50%, rgba(255,255,255,0) 100%);
		background: -o-linear-gradient(rgb(226,31,38) 10%, rgb5(255,255,255,0) 100%);
		background: linear-gradient(rgb(226,31,38)) 10%, rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
		
	}
	
	h1.style2 {
		
		display: none;
		color: yellow;
		margin-top: 70px;
		float: right;
		font-size: 500px;
		text-align: center;
		margin-right: 24px;
		padding-top: 130px;
		padding-bottom: 50px;
		
	}
	
	#home {
	    
	    margin-left:32px;
	    
	}
	
	.arrow_hover {
		
    	display: inline;
        width: 74%;
        margin-bottom: -1px;
        margin-left: -45px;
		
	}
	
	.arrow_hover:hover {
		
		display: inline;
		width: 74%;
        margin-bottom: -1px;
        margin-left: -45px;
	    content: url("../../images/Portfolio/Home page/millantv-return-to-top-arrow-hover.png");
		
	}

	#millantv_navbar_red {

        display: inline;
        width: 82px;
        margin-right: -156px;
        margin-top: 16px;
        float: right;

	}

	#millantv_navbar_red:hover {

        display: inline;
        width: 82px;
        margin-right: -156px;
        margin-top: 16px;
        float: right;
		content: url("../../images/millantv-logo-navbar-hover-black.svg");
		
	}
	
	/* The navigation bar */

	.navbar {
			
		z-index: 1;
		overflow: hidden;
		background-color: white;
		border-top: solid;
		color: rgb(226,31,38);
		position: fixed; /* Set the navbar to fixed position */
		top: 0; /* Position the navbar at the top of the page */
		width: 958.1px; /* Full width */
		font-family: "outward block";
		font-size: 60px;
		letter-spacing: .02em;
		padding-left: 0px;
		margin: 0px 0px 0px 0px;
		margin-top: 8px;
		border-top-width: 8px;
        margin-left: 8.5px;		
        padding-bottom: 5px;

	}

	/* Links inside the navbar */
	
	.navbar a {
		 
		font-family: "outward block";
		font-size: 60px;
		letter-spacing: .03em;
		float: left;
		display: block;
		color: red;
		text-align: center;
		margin: 10px 0px 0px 0px;
		word-spacing: .03em;
		text-decoration: none;
		margin-left: 31px;
        margin-right: -16px;
	
	}

	/* Change background on mouse-over */
	
	.navbar a:hover {
		
		  background-color: white;
		  color: black;
	
	}

	#Social_Justice_Coalition_title_navbar {

		margin-right: 134px;
        margin-top: 16px;
	}

	/* Main content */

	.main {
	  
			margin-top: 30px; /* Add a top margin to avoid content overlay */
	
	}
    
	#master {		
		
		overflow: auto;
		width: 975px; 
		margin: 0 auto; 
		/*border: dotted thin cyan;*/
		background: rgb(226,31,38);	
		margin-top: 8px;
		margin-bottom: 0px;
		padding-bottom: 10px;
		border-radius: 0px 0px 33px 33px;
		
	}
	
	h1 {
		
			font-family: "outward block";
			letter-spacing: .006em;
			color: red;
			font-size: 240px;
			font-weight: 100;
			margin-left: 32px;
			padding-top: 76px;
			margin-top: 24px;
			margin-bottom: 0px;
			
		}
		
		
	.font1 {
		
		font-family: Cambria, "Hoefler Text";
	}
	
	p {
			
			
		font-family: "tenso", sans-serif;
		font-weight: 350;
		font-style: normal;
		width: 892px;
		font-size: 18px;
		letter-spacing: .05em;
		word-spacing: .5px;
		line-height: 1.8;
		color: black;
		margin-left: -55px;
		margin-top: 60px;
		margin-bottom: 60px;
		padding-top: 0;
		transform: scale(.8,1);
			
	}
	
	.body_copy {
			
		font-family: "tenso", sans-serif;
		font-weight: 350;
		font-style: normal;
		width: 1092px;
		font-size: 18px;
		letter-spacing: .05em;
		word-spacing: .5px;
		line-height: 1.8;
		color: black;
		margin-left: -77px;
		margin-top: 60px;
		margin-bottom: 60px;
		padding-top: 0;
		transform: scale(.8,1);
			
	}
	
	.body_copy_2 {
			
			
		font-family: "tenso", sans-serif;
		font-weight: 350;
		font-style: normal;
		width: 1092px;
		font-size: 18px;
		letter-spacing: .05em;
		word-spacing: .5px;
		line-height: 1.8;
		color: black;
		margin-left: -77px;
		margin-top: 60px;
		margin-bottom: 60px;
		padding-top: 0;
		transform: scale(.8,1);
		margin-bottom: 30px; 
		margin-top: -7px; 
		margin-left: 1.5%; 
		max-width: fit-content;
		
	}
	
	.dont_hate_me {
		
		display: block;
		position: inherit;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		width: 93%;
		
	}
	
	.mobile_live_examples {
		
		display: none;
		
	}

	#character_design_1_1 {
		
		display: block;
		width: 65%;
		height: 100%;
		margin: auto;
		margin-bottom: -55px;
		margin-top: 60px;

	}
	
	#character_design_1_2 {
		
		display: block;
		width: 65%;
		height: 100%;
		margin: auto;
		margin-bottom: -55px;
		margin-top: 40px;	

	}
	
	#character_design_1_3 {
		
		display: block;
		margin: auto;
		width: 75%;
    	height: 75%;
		
	}
	
	#character_design_1_4 {
		
		display: block;
		width: 65%;
		height: 100%;
		margin: auto;
		margin-bottom: 70px;
		margin-top: 40px;	

	}
	
	#character_design_2_1 {
		
		display:block;
		width: 68%;
		margin: auto;
		margin-top: 60px;
		margin-bottom: 00px;
		
	}
	
	#character_design_2_2 {
		
		display: block;
		width: 70%;
		margin: auto;
		margin-top: -79px;
		margin-bottom: 45px;
		z-index: auto;
		
	}
	
	#character_design_2_3 {
		
		display: block;
		width: 75%;
		height: 75%;
		margin: auto;
		padding-bottom: 130px;
		
	}
	
	#character_design_2_4 {
		
		display: block;
		width: 70%;
		margin: auto;
		margin-top: -123px;
		margin-bottom: 70px;	

	}
	
	#character_design_3_1 {
		
		display:block;
		width: 68%;
		margin: auto;
		margin-top: 30px;
		margin-bottom: 00px;
		
	}
	
	#character_design_3_2 {
		
		display: block;
		width: 68%;
		margin: auto;
		margin-bottom: 40px;
		margin-top: -15px;
		
	}
	
	#character_design_3_3 {
		
		display: block;
		width: 75%;
		height: 75%;
		margin: auto;
		padding-bottom: 130px;
		
	}
	
	#character_design_3_3_3 {
		
		display: block;
		width: 75%;
		margin: auto;
		padding-bottom: 0;
		margin-top: -15.1% !important;
		margin-bottom: -16%;
		
	}
	
	#character_design_3_4 {
		
		display: block;
		width: 68%;
		margin: auto;
		margin-top: -43px;
		margin-bottom: 70px;	

	}

	#mom_standing {
		
		position: absolute;
		display: flex;
		z-index: 1;
		margin-left: 10%;
		padding-top: 17px;
		
	}
	
	#character_design_4_1 {
		
		display:block;
		width: 68%;
		margin: auto;
		margin-top: 100px;
		margin-bottom: 50px;
		
	}
	
	#character_design_4_2 {
		
		display: block;
		width: 68%;
		margin: auto;
		margin-top: -30px;
		margin-bottom: 45px;
		
	}
	
	#character_design_4_3 {
		
		display: block;
		position: relative;
        width: 75%;
        height: 75%;
        margin: auto;
        padding-bottom: 130px;
		
	}
	
	#character_design_4_4 {
		
		display: block;
		width: 68%;
		margin: auto;
		margin-top: 0px;
		margin-bottom: 70px;	
	}
	
	#character_design_5_1 {
		
		
		display:block;
		width: 68%;
		margin: auto;
		margin-top: 60px;
		margin-bottom: 50px;
		
	}
	
	#character_design_5_2 {
		
		display: block;
		width: 68%;
		margin: auto;
		padding-bottom: 0;
		margin-top: -85px;
		margin-bottom: -35px;

	}
	
	#character_design_5_3 {
		
		display: block;
		position: relative;
		width: 75%;
		height: 75%;
		margin: auto;
		padding-bottom: 70px;
		
	}

	#character_design_5_4 {
		
		display: block;
		width: 68%;
		height: 75%;
		margin: auto;
		padding-bottom: 70px;
		
	}
	
	#Toonshiniwami_logo {
		
		display: block;
		width: 70%;
		padding-top: 30px;
		padding-bottom: 30px;
		margin: auto;
		
	}
	
	#comic_pg1 {
		
		display: block;
		margin: auto;
		width: 90%;
		z-index: 0;
		position: relative;
		margin-left: 11px;
}
		
	}
	
	#comic_pg3 {
		
		display: block;
		margin: auto;
		width: 90%;
		margin-top: -13%;
		z-index: -99;
		padding-left: 9px;
		
	}
	
	#comic_pg4 {
		
		display: block;
		margin: auto;
		width: 90.1%;
		margin-top: -10.5%;
		margin-bottom: -40px;
		z-index: -99;
		padding-bottom: 0px;
		padding-left: 14.5px;

	}
	
	#Toonshiniwami_screengrab_1 {
		
		display: block;
		margin: auto;
		max-width: 93%;
		margin-top: 4%;
		padding-bottom: 150px;
		
	}

	#Toonshiniwami_screengrab_2 {
		
		display: block;
		margin: auto;
		width: 93%;
		margin-top: -220px;
		padding-bottom: 0px;
		
	}
	
	#3D_characters {
		
		margin: auto;
		width: 95%;
		display: block;
		
	}

	#white_background {
		
		z-index: -99px;
		overflow: hidden;
		width: 958px;
		display: block;
		height: auto;
		background-color: white;
		margin: auto;
		margin-top: 0px;
		position: relative;
        background: white;
        background-size: 60% 0%;
        background-repeat: no-repeat;
        border-radius: 0px 0px 25px 25px;

	}
	
	iframe {
		
		display: block;
		position: inherit;
		margin: auto;
		margin-bottom: 8px;
		margin-top: 0px;
		padding: 0px;
		width:891px; 
		height: 499px;
		
	}		
	
}